<template>
  <div class="container" v-loading="isLoading">
    <el-card>
      <el-table :data="tableData" border>
        <el-table-column prop="vistor_name" label="访客姓名" />
        <el-table-column prop="name" label="性别">
          <template slot-scope="{row}">
            <span v-if="row.sex=='2'" class="pink">女</span>
            <span v-else class="male">男</span>
          </template>
        </el-table-column>
        <el-table-column prop="vistor_phone" label="访客手机号" />
        <el-table-column prop="subdistrict_name" label="到访小区名称" />
        <el-table-column prop="date" label="到访时间" />
        <el-table-column prop="is_driver" label="是否驾车">
          <template slot-scope="{row}">
            <span v-if="row.is_driver">驾车</span>
            <span style="color:red" v-else>不驾车</span>
          </template>
        </el-table-column>
         <el-table-column prop="car_no" label="车牌号">
          <template slot-scope="{row}">
            <span v-if="row.car_num">{{row.car_num}}</span>
            <span style="color:red" v-else>不驾车</span>
          </template>
        </el-table-column>
        <el-table-column prop="date" label="状态">
          <template slot-scope="{ row }">
            <span>{{statusText[row.status]}}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="120px" align="center">
          <template slot-scope="{ row }">
            <el-button type="text" @click="openEdit(row.qr_code)"
              >查看</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <footer class="footer">
      <el-pagination
        background
        layout="total, sizes, pager, jumper"
        :current-page="searchForm.page"
        :page-sizes="[10, 20, 30, 50, 100]"
        :page-size="searchForm.per_page"
        :total="tableTotal"
        @size-change="changeSize"
        @current-change="changeCurrent"
      />
    </footer>

    <el-dialog
      title="查看详情"
      :visible.sync="showAddOrEdit"
      width="1200px"
      @closed="() => $refs['builingForm'].resetFields()"
    >
      <el-form
        :model="builingForm"
        ref="builingForm"
        label-width="7em"
      >
        <el-form-item prop="$id" hidden />
        <el-form-item class="span-2" label="访客姓名" prop="vistor_name">
          <el-input readonly
            v-model="builingForm.vistor_name"
            placeholder="访客姓名信息"
          ></el-input>
        </el-form-item>

        <el-form-item class="span-2" label="访客手机号" prop="vistor_phone">
          <el-input readonly
            v-model="builingForm.vistor_phone"
            placeholder="访客手机号"
          ></el-input>
        </el-form-item>

        <el-form-item class="span-2" label="来访事由" prop="vistor_matter_name">
          <el-input readonly
            :value="builingForm.vistor_matter_name"
            placeholder="来访事由"
          ></el-input>
        </el-form-item>

        <el-form-item class="span-2" label="到访日期" prop="date">
          <el-input readonly
            v-model="builingForm.date"
            placeholder="到访日期"
          ></el-input>
        </el-form-item>

        <el-form-item class="span-2" label="到访小区" prop="subdistrict_name">
          <el-input readonly
            :value="builingForm.subdistrict_name"
            placeholder="到访小区"
          ></el-input>
        </el-form-item>

        <el-form-item class="span-2" label="是否驾车" prop="is_driver">
          <el-switch disabled v-model="builingForm.is_driver"></el-switch>
        </el-form-item>

        <el-form-item v-if="builingForm.is_driver" class="span-2" label="车牌号" prop="car_num">
          <el-input readonly
            :value="builingForm.car_num"
            placeholder="车牌号"
          ></el-input>
        </el-form-item>

        <el-divider></el-divider>

        <el-form-item class="span-2" label="业主姓名" prop="user_real_name">
          <el-input readonly
            :value="builingForm.user_real_name"
            placeholder="业主姓名"
          ></el-input>
        </el-form-item>

        <el-form-item class="span-2" label="业主手机号" prop="user_phone">
          <el-input readonly
            :value="builingForm.user_phone"
            placeholder="业主手机号"
          ></el-input>
        </el-form-item>

        <el-form-item class="span-2" label="业主地址" prop="user_addr">
          <el-input readonly
            :value="builingForm.user_addr"
            placeholder="业主地址"
          ></el-input>
        </el-form-item>



        <el-divider></el-divider>
        <el-form-item label="工单状态" prop="status">
          <el-select v-model="builingForm.status" disabled  placeholder="请选择状态">
            <el-option
              v-for="(oVal, oIdx) of status"
              :key="oIdx"
              v-bind="oVal"
            />
          </el-select>
        </el-form-item>

      </el-form>

      <template #footer v-if="builingForm.$status !== 2">
        <el-button type="primary" @click="closeDialog()"
          >关闭</el-button
        >
      </template>
    </el-dialog>


  </div>
</template>

<script>
import API from "@/api";
import { table, addOrEdit } from "@/utils/mixins";

export default {
  mixins: [table, addOrEdit],
  data: () => ({
    showAddOrEdit:false,
    isLoading: true,
    tableData:[],
    tableTotal: 0,
    isKey: false,
    searchForm:{
      page:1,
      per_page:10,
    },
    status: [
      { label: "未核销", value: 0 },
      { label: "已核销", value: 1 },
      { label: '已过期', value: 2 },
    ],
    statusText: ["未核销","已核销",'已过期'],
    builingForm: {
      $id: "",
      vistor_name:"",
      vistor_matter_name:"",
      vistor_phone:'',//报修图片
      car_num:"",
      date:'',
      is_driver:false,
      qr_img:"",
      subdistrict_name:"",
      use_time:'',
      vistor_matter_id:"",
    },
  }),

  created() {
    this.getList()
  },



  methods: {
    // 获取列表
    getList(){
      this.isLoading=true
      API.getVisitorList(this.searchForm)
      .then(({data})=>{
        console.log(data)
        data.items.forEach(item=>{
          item.status=parseInt(item.status)
          item.vistor_phone=item.vistor_phone.replace(/^(\d{3})\d{4}(\d+)/, '$1****$2')
        })
        this.tableData=data.items
        this.tableTotal=data.total
      }).catch((err) => {
      }).finally(() =>{
        this.isLoading=false
      })
    },

    // 分页
    changeSize(val){
      this.searchForm.per_page = val
      this.searchForm.page = 1
      this.getList()
    },

    // 分页
    changeCurrent(val){
      this.searchForm.page = val
      this.getList()
    },

    // 查看工单详情
    openEdit(code){
      let _that=this
      let loadingInstance=this.$loading({ fullscreen: true })
      API.getVisitorInfo(code)
      .then(({data})=>{
        _that.builingForm.$id=data.id
        _that.builingForm.vistor_name=data.vistor_name
        _that.builingForm.vistor_matter_name=data.vistor_matter_name
        _that.builingForm.vistor_phone=data.vistor_phone
        _that.builingForm.date=data.date
        _that.builingForm.subdistrict_name=data.subdistrict_name
        _that.builingForm.is_driver=data.is_driver
        _that.builingForm.car_num=data.car_num
        _that.builingForm.status=parseInt(data.status)
        _that.builingForm.user_real_name=data.user_real_name
        _that.builingForm.user_phone=data.user_phone
        _that.builingForm.user_addr=data.user_addr
      }).catch((err) => {
      }).finally(() =>{
        this.showAddOrEdit=true
        loadingInstance.close()
      })
    },

    // 关闭弹窗
    closeDialog(){
      this.restForm()
      this.showAddOrEdit=false
    },

    restForm(){
      let _that=this
      _that.builingForm.$id=""
      _that.builingForm.user_real_name=""
      _that.builingForm.user_phone=""
      _that.builingForm.user_addr_info=""
      _that.builingForm.create_time=""
      _that.builingForm.report_type_name=""
      _that.builingForm.report_addr=""
      _that.builingForm.status=""
      _that.builingForm.report_content=""
      _that.builingForm.report_imgs=[]
      _that.builingForm.repair_time=""
      _that.builingForm.admin_user_avatar_url=""
      _that.builingForm.admin_user_name=""
      _that.builingForm.repair_content=""
      _that.builingForm.repair_imgs=[]
    },
  },
};
</script>

<style lang="scss" scoped>
  .pink{
    color:#ff6699;
  }
  .male{
    color:#0000FF;
  }
  ::v-deep{
    .el-message-box{
      min-width:400px;
    }
    .el-dialog{
      margin-top:2vh !important;
    }
    .el-switch{
      transform:translateY(6px)
    }
  }
</style>
